<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: row;justify-content: center;overflow: hidden">
    <div class="chartDiv">
      <div style="width: 100%;height: 90%;display: flex;flex-direction: row;justify-content: space-around;">
        <div class="line">
          <div class="tips">
            <img style="width:5%;height: 30%;margin-top: 20px;margin-left: 25px;" src="@/assets/img/装饰线.png" alt="">
            <span>阀状态</span>
          </div>
          <div class="analysisTask">
            <chart-line :echarts-data="params[0]" />
          </div>
          <div class="analysisTask">
            <chart-line :echarts-data="params[1]" />
          </div>
        </div>
        <div class="line">
          <div class="tips">
            <img style="width:5%;height: 30%;margin-top: 20px;margin-left: 25px;" src="@/assets/img/装饰线.png" alt="">
            <span>阀冷状态</span>
          </div>
          <div class="analysisTask">
            <chart-line :echarts-data="params[2]" />
          </div>
          <div class="analysisTask">
            <chart-line :echarts-data="params[3]" />
          </div>
        </div>
      </div>
      <div class="notice">
        <div class="noticepic"><div style="margin-left:-12px">提示</div></div>
        <div style="width:92%;height: 100%;color:rgb(2,126,177);display: flex;flex-direction: column;align-items: center;justify-content: space-around;">
          <vue-seamless-scroll :data="NoticeData.data" class="seamless-warp" :class-option="defaultOption">
            <div v-for="(Item,index) in NoticeData.data" style="margin-top:10%">{{ Item }}</div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <div>
      <!-- 右边展示框 -->
      <env-content :envcontent-data="envContentData" class="env" />
    </div>
  </div>
</template>

<script>
import ChartLine from '@/components/Echart/chartLint.vue'
import EnvContent from '@/components/MyBar/EnvContent.vue'
import {
  getalarmInfo, getHint,
  getpowerElectricity,
  gettriggerAngle, getvalveHallTemperatureHumidity,
  getvalvePower,
  getvalveTowerTemperatureMax,
  getwaterFlowTemperature
} from '../../api/statusMonitor'
export default {
  name: 'StatusMonitor',
  components: {
    ChartLine, EnvContent
  },
  data() {
    return {
      tmpvalvehallId: 1,
      envContentData: {
                id: 1,
                },
      params: [
        { id: 'test1',
          series:''
          // xData: [8,20, 30,40,50],
          // series: [
          //   { type: 'line',
          //     name: '输送功率',
          //     data: [{
          //       value: 5,
          //       time: '2022-08-29 09:41:59.727'
          //     },
          //     {
          //       value: 0,
          //       time: '2022-08-29 09:41:59.800'
          //     },
          //     {
          //       value: 25,
          //       time: '2022-08-29 09:41:59.927'
          //     },
          //     {
          //       value: 35,
          //       time: '2022-08-29 09:41:59.227'
          //     },
          //     {
          //       value: 15,
          //       time: '2022-08-29 09:41:59.727'
          //     }
          //     ]
          //   },
          //   {
          //     type: 'line',
          //     name: '直流电流',
          //     data: [{
          //       value: 25,
          //       time: '2022-08-29 09:41:52.327'
          //     },
          //     {
          //       value: 45,
          //       time: '2022-08-29 09:41:59.727'
          //     },
          //     {
          //       value: 15,
          //       time: '2022-08-29 09:41:59.727'
          //     },
          //     {
          //       value: 15,
          //       time: '2022-08-29 09:41:59.727'
          //     },
          //     {
          //       value: 35,
          //       time: '2022-08-29 09:41:59.727'
          //     }
          //     ]
          //   }
          // ]
        },
        { id: 'test2',
          series: ''
          // xData: [5,20, 30,40,50],
          // series: [
          //   { type: 'line',
          //     name: '触发角',
          //     data: [[5, 5], [10, 20], [15, 36], [35, 10], [45, 20]]
          //   }
          // ] 
        },
        { id: 'test3',
          // xData: [8,20, 30,40,50],
          series: '' },
        { id: 'test4',
          // xData: [8,20, 30,40,50],
          series: [
            { type: 'line',
              name: '进阀压力',
              data: [[5, 5], [10, 20], [15, 36], [35, 10], [45, 20]]
            },
            {
              type: 'line',

              name: '出阀压力',
              data: [[5, 5], [15, 25], [25, 20], [40, 10], [45, 20]]
            }
          ] },
      ],
      // radio1:'告警消息',
      // ArlamData:{
      //     "msg": "请求数据成功",
      //     "code": 0,
      //     "data": [{
      //             "time": "2022-04-28 15:01:34",
      //             "msg": "xxx晶闸管IP丢失产生"
      //         }, {
      //             "time": "2022-04-28 15:01:34",
      //             "msg": "xxx晶闸管IP丢失产生"
      //         }
      //     ]
      // },
      NoticeData: {
        'msg': '请求数据成功',
        'code': 0,
        'data': ['提示1:ffffff', '提示2', '提示3', '提示4', '提示5', '提示6', '提示7', '提示8']
      }
    }
  },
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {
    console.log('创建了')
    // const {name,xData,series} = this.series1;
    //    console.log(this.$refs)
    //    this.$refs.chart_line_two.initChart(this.name,this.xData,this.series2)
    //    this.$refs.chart_line_one.initChart(this.name,this.xData,this.series1)

    // 基于准备好的dom，初始化echarts实例
  },
  created() {
    this.$nextTick(() => {
      this.getData()
      this.initChart()
    })
  },
  methods: {
    getData() {
      console.log('获取数据', this.id)
      getpowerElectricity(this.tmpvalvehallId).then(response => {
        this.params[0].series = response.data.series
        // this.params[0].id = 'test0'
      })
      gettriggerAngle(this.tmpvalvehallId).then(response => {
        this.params[1].series = response.data.series

      })
      getwaterFlowTemperature(this.tmpvalvehallId).then(response => {
        this.params[2].series = response.data.series
      })
      getvalvePower(this.tmpvalvehallId).then(response => {
        this.params[3].series = response.data.series
      })
      getHint(this.tmpvalvehallId).then(response => {
        this.NoticeData.data = response.data
      })
    },
    async initChart() {
    }
  }
}
</script>

<style lang="scss" scoped>
.chartDiv{
    width:65%;
    height:95%;
    margin-left: 1%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

}
.line{
    width: 48%;
    height: 97%;
    background-color: rgb(6,31,51);
    display: flex;
    flex-direction:column;
    align-items: center;
}
.analysisTask{
    width: 95%;
    height: 47%;

}
.tips{
    width: 100%;
    height: 50px;
    display: flex;
    /* justify-content: space-around;
    align-items: center; */
    color: rgb(6,203,255);
    text-align: left;
    text-indent: 10px;
    line-height: 60px;
}
.notice{
    width: 98%;
    height: 12%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    background-color: rgb(6,31,51);
}
.noticepic{
    width: 8%;
    height: 100%;
    background:url("~@/assets/img/提示.png") no-repeat;
    background-size: 90% 110%;
    background-position:left;
    line-height: 80px;
    display: flex;
    writing-mode: vertical-rl;
    justify-content: center;
    align-items: center;
    color: rgb(6,203,255);
    margin-left: -5px;
}
.env{
    width: 560px;
    height: 95%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    background-color: rgb(6,31,51);
    margin-right:1%;
}
.seamless-warp {
        height: 100px;
        overflow: hidden;
    }
// .convert1{
//     width: 95%;
//     height: 92%;
//     display: flex;
//     justify-content: flex-start;
//     flex-direction: column;
//     background-color: rgb(8, 40, 65);
//     margin-bottom: 2%;
//     align-items: center;
// }
// .convert2{
//     width: 95%;
//     height: 92%;
//     display: flex;
//     justify-content: flex-start;
//     flex-direction: column;
//     margin-bottom: 2%;
//     align-items: center;
// }
// .convertData{
//     width: 100%;
//     height: 50%;
// }
</style>

